<template>
    <!-- <router-link to="/">首页</router-link> <br />
    <RouterLink to="/login">登录页面</RouterLink><br />
    <RouterLink to="/product">商品</RouterLink> -->

    <!-- {{ $router }} -->
    <!-- {{ $router.options.routes  }} -->

    <div class="optionIcon">
        <component :is="optionIcon" class="icon" @click="openOrClose"/>
    </div>

    <el-menu active-text-color="#ffd04b"  :collapse="store1.isMenuCollapse"
    background-color="#545c64" class="el-menu-vertical-demo" 
    :default-active="$route.path" :router="true" text-color="#fff">
    <!-- :router="true" 加上冒号会把true当作变量 布尔类型，不加冒号会把true当作字符串 -->
<!-- default-active 页面加载时默认激活菜单的index -->

        <template v-for="item1 in $router.options.routes">

            <!-- 处理只有一级菜单 -->
            <!-- : 后面是变量，不是一个字符 -->
            <el-menu-item :index="item1.path" 
            v-if="item1.children == undefined && item1.meta.show != false" v-auth:role="item1.meta.roles">
                <!-- <el-icon>
                    <Menu />
                </el-icon> -->
                <el-icon><component :is="item1.meta.icon" class="icon"/></el-icon>
                <span>{{ item1.meta.title }}</span>
            </el-menu-item>

            <!-- 处理含有二级菜单 -->
            <el-sub-menu :index="item1.path" v-if="item1.children != undefined && item1.meta.show != false" v-auth:role="item1.meta.roles">
                <template #title>
                    <el-icon><component :is="item1.meta.icon" class="icon"/></el-icon><span>{{ item1.meta.title }}</span>
                </template>

                <template v-for="item2 in item1.children">
                    <el-menu-item :index="item2.path" v-if=" item2.meta.show != false">
                        <el-icon><component :is="item2.meta.icon" class="icon"/></el-icon>{{ item2.meta.title }}
                    </el-menu-item>
                </template>
            </el-sub-menu>
        </template>
    </el-menu>
</template>

<script setup lang="ts">
import {ref} from 'vue'

// const isCollapse = ref(false)

import useStore1 from '@/store/store1'

const store1 = useStore1()
const optionIcon = ref('Fold') //Expand
const openOrClose =()=>{
    optionIcon.value = optionIcon.value == "Fold" ? "Expand":"Fold"
    store1.isMenuCollapse = !store1.isMenuCollapse

    // isCollapse.value = !isCollapse.value
    
}
</script>
<style scoped>
.icon{
    width:20px;
    padding-right: 5px;
}
.optionIcon{
    text-align: center;
    color: white;
    cursor: pointer;
}
.el-menu-vertical-demo:not(.el-menu--collapse){
   min-height: calc(100vh - 80px);
   width: 200px;
}
.el-menu--collapse {
    /*屏幕高度的占比 */
    min-height: calc(100vh - 80px);
}
.el-menu{
    border-right: 0px;
}
</style>